@keyframes loginAnimation{
    0%{
        opacity: 0;
        transform: translate(0, -5rem);
    }

    100%{
        opacity: 1;
        transform: translate(0, 0);;
    }
}

@keyframes toRightTop{
    0%{
        transform: translate(-10rem, 10rem);
        opacity: 0;
    }

    100%{
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes toLeft{
    0%{
        transform: translate(10rem);
        opacity: 0;
    }

    100%{
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes toRight{
    0%{
        transform: translate(-10rem);
        opacity: 0;
    }

    100%{
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes toTop{
    0%{
        transform: translate(0, 10rem);
        opacity: 0;
    }

    100%{
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes toBottom{
    0%{
        transform: translate(0, -10rem);
        opacity: 0;
    }

    100%{
        transform: translate(0);
        opacity: 1;
    }
}